<template>
  <div class="limited-row">
    <!-- 左侧内容 -->
    <div class="left-content">
      <div class="header-container input-title-container">
        <el-input v-model="item.title" placeholder="请输入任务标题" class="input-title"></el-input>
        <el-button type="primary" @click="saveFlaw" class="button-title">保存</el-button>
      </div>
      <!-- 任务描述信息 -->
      <el-descriptions
        labelClassName="descriptions-label-class"
        content-class-name="descriptions-content-class"
        :column="4" border direction="vertical">
        <el-descriptions-item label="负责人">
          <project-member class="input-class" v-model="item.responsibleId"
                          :project-id="item.projectId"></project-member>
        </el-descriptions-item>
        <el-descriptions-item label="项目名称">
          {{ item.projectName }}
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-select class="input-class" v-model="item.status" placeholder="请选择状态">
            <el-option
              v-for="dict in dict.type.flaw_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="优先级">
          <el-select class="input-class" v-model="item.priority" placeholder="请选择优先级">
            <el-option
              v-for="dict in dict.type.flaw_priority"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="项目id">{{ item.projectId }}</el-descriptions-item>
        <el-descriptions-item label="工作项ID">{{ item.workItemId }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ item.createdAt }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ item.updatedAt }}</el-descriptions-item>
      </el-descriptions>
      <div class="menu">
        <!-- 菜单 -->
        <el-menu
          :default-active="activeIndex"
          active-text-color="#409EFF"
          background-color="#fff"
          mode="horizontal"
          text-color="#666"
          @select="(key) => (activeIndex = key)"
        >
          <el-menu-item index="1">描述</el-menu-item>
          <el-menu-item index="2">重现步骤</el-menu-item>
          <el-menu-item index="3">测试</el-menu-item>
          <el-menu-item index="4">工作项</el-menu-item>
        </el-menu>
      </div>


      <!-- 动态内容展示 -->
      <div class="content-box">
        <div v-show="activeIndex === '1'">
          <editor :height="348" v-model="item.description"></editor>
        </div>
        <div v-show="activeIndex === '2'">
          <editor :height="348" v-model="item.reproductionStep"></editor>
        </div>
        <div v-show="activeIndex === '3'">
          <h1 class="page-title">{{ test.title || "测试详情" }}</h1>
          <!-- 任务描述信息 -->
          <el-descriptions
            labelClassName="descriptions-label-class"
            content-class-name="descriptions-content-class"
            :column="4" border direction="vertical">
            <el-descriptions-item label="负责人">
              <user-and-avatar :user-id="test.executorId"></user-and-avatar>
            </el-descriptions-item>
            <el-descriptions-item label="测试状态">
              <dict-tag :options="dict.type.test_status" :value="test.status"/>
            </el-descriptions-item>
            <el-descriptions-item label="结果">
              <dict-tag :options="dict.type.test_outcome" :value="test.outcome"/>
            </el-descriptions-item>
            <el-descriptions-item label="优先级">
              <dict-tag :options="dict.type.test_priority" :value="test.priority"/>
            </el-descriptions-item>
            <el-descriptions-item label="项目id">{{ test.projectId }}</el-descriptions-item>
            <el-descriptions-item label="工作项ID">{{ test.workItemId }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ test.createdAt }}</el-descriptions-item>
            <el-descriptions-item label="更新时间">{{ test.updatedAt }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div v-show="activeIndex === '4'">
          <h1 class="page-title">{{ work.title || "任务详情" }}</h1>
          <!-- 任务描述信息 -->
          <el-descriptions
            labelClassName="descriptions-label-class"
            content-class-name="descriptions-content-class"
            :column="4" border direction="vertical">
            <el-descriptions-item label="负责人">
              <user-and-avatar :user-id="work.assignee"></user-and-avatar>
            </el-descriptions-item>
            <el-descriptions-item label="状态">
              <dict-tag :options="dict.type.work_status" :value="work.status"/>
            </el-descriptions-item>
            <el-descriptions-item label="优先级">
              <dict-tag :options="dict.type.priority" :value="work.priority"/>
            </el-descriptions-item>
            <el-descriptions-item label="类型">
              <dict-tag :options="dict.type.work_type" :value="work.type"/>
            </el-descriptions-item>
            <el-descriptions-item label="开始时间">{{ work.startDate }}</el-descriptions-item>
            <el-descriptions-item label="截至时间">{{ work.dueDate }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ work.createdAt }}</el-descriptions-item>
            <el-descriptions-item label="更新时间">{{ work.updatedAt }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </div>

    <!-- 右侧内容 -->
    <div class="right-content">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="1" title="属性">
          <el-descriptions labelClassName="descriptions-label-class"
                           content-class-name="descriptions-content-class" :column="1" border>
            <el-descriptions-item label="故事点数">
              <el-input-number :min="0" controls-position="right" class="input-class" v-model="item.storyPoints"
                               placeholder="请输入故事点数"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="严重程度">
              <el-select class="input-class" v-model="item.severity" placeholder="请选择严重程度">
                <el-option
                  v-for="dict in dict.type.order_of_severity"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="复现概率">
              <el-select class="input-class" v-model="item.recurrenceProbability" placeholder="请选择复现概率">
                <el-option
                  v-for="dict in dict.type.recurrence_probability"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="缺陷类别">
              <el-select class="input-class" v-model="item.defectClass" placeholder="请选择缺陷类别">
                <el-option
                  v-for="dict in dict.type.defect_class"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="原因分析">
              <el-select class="input-class" v-model="item.causeAnalysis" placeholder="请选择原因分析">
                <el-option
                  v-for="dict in dict.type.cause_analysis"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="解决方案">
              <el-select class="input-class" v-model="item.solution" placeholder="请选择解决方案">
                <el-option
                  v-for="dict in dict.type.solution"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item name="2" title="变更">
          <el-descriptions labelClassName="descriptions-label-class"
                           content-class-name="descriptions-content-class" :column="1" border>
            <el-descriptions-item label="版本">
              <el-input clearable class="input-class" v-model="item.version" placeholder="请输入版本号"></el-input>
            </el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item name="5" title="工时">
          <el-descriptions labelClassName="descriptions-label-class"
                           content-class-name="descriptions-content-class" :column="1" border>
            <el-descriptions-item label="预估工时">
              <el-input-number placeholder="请输入工作量估算" v-model="item.estimatedWorkingHours"
                               controls-position="right" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="登记工时">
              <el-input-number placeholder="请输入剩余工作量" v-model="item.registerWorkingHours"
                               controls-position="right" :min="0" :max="item.estimatedWorkingHours"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="剩余工时">
              {{ Math.max(item.estimatedWorkingHours - item.registerWorkingHours, 0) || '' }}
            </el-descriptions-item>
            <el-descriptions-item label="工时进度">
              <el-progress
                :percentage="(Math.min(item.registerWorkingHours/item.estimatedWorkingHours,1)*100).toFixed(0)*1.0||0"></el-progress>
            </el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item name="6" title="基础信息">
          <el-descriptions labelClassName="descriptions-label-class"
                           content-class-name="descriptions-content-class" :column="1" border>
            <el-descriptions-item label="更新人">
              <user-and-avatar :userId="item.updatedBy"></user-and-avatar>
            </el-descriptions-item>
            <el-descriptions-item label="更新时间">{{ item.updatedAt }}</el-descriptions-item>
            <el-descriptions-item label="创建人">
              <user-and-avatar :userId="item.createdBy"/>
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ item.createdAt }}</el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
      </el-collapse>
    </div>
    <el-dialog append-to-body :visible.sync="showAddFlaw" title="添加缺陷" width="1650px">
      <add-flaw :test="item" v-if="showAddFlaw"></add-flaw>
    </el-dialog>
  </div>
</template>
<script>
import UserAndAvatar from "@/components/UserAndAvatar/index.vue";
import AddFlaw from "@/components/Project/addFlaw.vue";
import {getFlaw, updateFlaw} from "@/api/projectUser/userFlaw";
import ProjectMember from "@/components/ProjectMember/index.vue";
import {getWorkById} from "@/api/projectUser/userWork";
import {getTest} from "@/api/projectUser/userTest";

export default {
  name: "UpFlaw",
  components: {ProjectMember, AddFlaw, UserAndAvatar},
  dicts: [
    'flaw_status',           // 缺陷状态
    'flaw_priority',         // 缺陷优先级
    'test_status',          // 测试状态
    'test_outcome',         // 测试结果
    'test_priority',        // 测试优先级
    'work_status',          // 工作状态
    'priority',             // 优先级
    'work_type',            // 工作类型
    'order_of_severity',    // 严重程度
    'recurrence_probability', // 重现概率
    'defect_class',         // 缺陷类型
    'cause_analysis',       // 原因分析
    'solution'              // 解决方案
  ],
  data() {
    return {
      test: {},
      work: {},
      showAddFlaw: false,
      testStatusType: [],
      nowOutCome: '',
      testStepList: [],
      activeIndex: '1',
      activeNames: ['1', '2', '3', '4', '5', '6'], // 默认展开所有折叠项
      item: {},
      childItem: [],
      fileList: [],
    };
  },
  props: {
    flawId: [Number, String],
  },
  watch: {
    flawId: {
      handler() {
        this.getData()
      },
      immediate: true
    }
  },
  created() {
    this.getData()
  },
  methods: {
    saveFlaw() {
      updateFlaw(this.item).then(() => {
        this.$modal.msgSuccess("修改成功");
        this.$emit('upData')
      })
    },
    getData() {
      getFlaw(this.flawId).then(({data}) => {
        this.item = data
        getWorkById(data.workItemId).then(({data}) => {
          this.work = data
        })
        getTest(data.testId).then(({data}) => {
          this.test = data;
        });
        getWorkById(data.workItemId).then(({data}) => {
          this.work = data
        })
      })
    },
  }
};
</script>
<style lang="scss" scoped>

</style>
